<template>
	<view class="content">

		<view class="article-tab"
			style="display: flex; width: 300rpx;border: 1px solid #1156FF;justify-content: center;">
			<view @click.prevent="noticeActive=1" :class="noticeActive===1?'active':''" class="tab-item">个人身份</view>
			<view @click.prevent="noticeActive=2" :class="noticeActive===2?'active':''" class="tab-item">企业身份</view>
		</view>

		<view class="content-block">
			<view class="fold" v-if="noticeActive==1">
				<image class="fold-img" :src="cloudStorage+'/home/manual/gr1.png'" mode="widthFix"></image>
				<image class="fold-img" :src="cloudStorage+'/home/manual/gr2.png'" mode="widthFix"></image>
				<image class="fold-img" :src="cloudStorage+'/home/manual/gr3.png'" mode="widthFix"></image>
				<image class="fold-img" :src="cloudStorage+'/home/manual/gr4.png'" mode="widthFix"></image>
				<image class="fold-img" :src="cloudStorage+'/home/manual/gr5.png'" mode="widthFix"></image>
				<image class="fold-img" :src="cloudStorage+'/home/manual/gr6.png'" mode="widthFix"></image>
			</view>
			<view class="fold" v-if="noticeActive==2">
				<image class="fold-img" :src="cloudStorage+'/home/manual/qy1.png'" mode="widthFix"></image>
				<image class="fold-img" :src="cloudStorage+'/home/manual/qy2.png'" mode="widthFix"></image>
				<image class="fold-img" :src="cloudStorage+'/home/manual/qy3.png'" mode="widthFix"></image>
				<image class="fold-img" :src="cloudStorage+'/home/manual/qy4.png'" mode="widthFix"></image>
				<image class="fold-img" :src="cloudStorage+'/home/manual/qy5.png'" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {

				noticeActive: 1,

			}
		},
		methods: {

		},
		onLoad() {


		}
	}
</script>

<style lang="scss">
	.content {
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;

		.article-tab {
			height: 70rpx;
			margin: 40rpx 30%;
			box-shadow: 0px 0px 4px 3px #e5e5e5;
			border-radius: 5px;

			.tab-item {
				width: 50%;
				height: 100%;
				text-align: center;
				background-color: #fff;
				color: #1257FF;
				line-height: 70rpx;
				border-radius: 5px;
			}

			.tab-item.active {
				background-color: #1156FF;
				color: #fff;
			}
		}

		.content-block {
			width: calc(100% - 60rpx);
			margin: 20rpx auto;
			border-radius: 10px;
			background-color: #FFFFFF;

			.fold {
				width: 96%;
				margin: 20rpx auto;

				.fold-img {
					width: 100%;
					margin-top: 20rpx;
				}
			}
		}

	}
</style>